<template>
	<view class="content">
		<scroll-view class="scrollV" scroll-y="true">

			<view class="inputView">
				<text class="leftTitle">活动内容</text>
			</view>
			<view class="inputView">
				{{"去清远古龙峡漂流"}}
			</view>

			<view class="inputView">
				<text class="leftTitle">签到须知</text>
			</view>
			<view class="inputView">
				{{'距离活动地10km内可签到成功'}}
			</view>

			<!-- 
			 App端：manifest.json的“App模块配置”中勾选“Maps(地图)”，并根据项目实际情况勾选使用的三方地图SDK：https://uniapp.dcloud.net.cn/tutorial/app-maps.html#
			 H5端： 使用地图和定位相关，需要在 manifest.json 内配置腾讯或谷歌等三方地图服务商申请的秘钥（key）。高德地图需要额外配置 securityJsCode 或 serviceHost，
			 
			 若是微信小程序只需配置微信小程序权限配置）：
			      page.json配置以下
			  
			      // 权限设置
			      "permission": {
			          "scope.userLocation": {
			              "desc": "您的位置信息将用于该活动签到"
			          }
			      }
			 -->
			<!-- scale缩放级别，取值范围为3-20 longitude：地图中心精度 latitude：地图中心纬度 markers:覆盖物 show-location：是否显示定位-->
			<map class="mapV" :latitude="infoDict.lat" :longitude="infoDict.lon" scale='6' :markers="covers"
				show-location=false>
			</map>

		</scroll-view>

		<view class="btnview" @tap="goSignIn">{{'签到' + distanceStr}}</view>



	</view>
</template>

<script>
	import Vue from 'vue'
	import qqmapsdk from "../../utils/qqmap-wx-jssdk.min.js";


	export default {
		data() {
			return {
				// 反向编码结果信息
				result: {},
				// 覆盖物
				covers: [],

				// 目标经纬度信息
				infoDict: {
					'lon': '113.17',
					'lat': '23.8'
				},

				// 我的定位经纬度信息
				myPinInfo: {},

				// 默认距离为负数
				distance: -9999,
				distanceStr: ''
			}
		},


		onShow() {

			// 获取当前位置
			this.getlocation();

		},
		methods: {

			getlocation() {

				let myThis = this;
				console.log('获取位置开始');
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						myThis.myPinInfo = res;
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);

						myThis.getCity();

						myThis.covers = [{
								latitude: myThis.infoDict.lat,
								longitude: myThis.infoDict.lon,
								width: 30,
								height: 30,
								id: 20000,
								iconPath: '../../static/activity_pin.png'
							},
							{
								latitude: myThis.myPinInfo.latitude,
								longitude: myThis.myPinInfo.longitude,
								width: 30,
								height: 30,
								id: 20001,
								iconPath: '../../static/people_pin.png'

							}
						];
						myThis.distance = myThis.getDistance(myThis.infoDict.lat, myThis.infoDict.lon, myThis
							.myPinInfo.latitude, myThis.myPinInfo.longitude)
						myThis.distanceStr = '(当前距离' + myThis.distance + '米)';

					}
				});
			},
			getCity() {
				const QQMapWX = new qqmapsdk({
					//腾讯地图  需要用户自己去申请key
					key: "SFABZ-WANWW-FISRY-3IGTF-HV7RE-YSFTI"
				});
				let that = this;

				QQMapWX.reverseGeocoder({
					location: {
						latitude: that.myPinInfo.latitude,
						longitude: that.myPinInfo.longitude
					},
					success: function(res) {
						console.log('解析地址成功', res);

						that.result = res.result
						uni.showModal({
							title: "解析地址",
							content: "解析地址 = " + JSON.stringify(res)
						})
						let province = res.result.ad_info.province; // 市

						let city = res.result.address;

					},
					fail: function(res) {
						console.log(res);
					},
					complete: function(res) {
						console.log(res);
					}
				});
			},


			// 计算两点距离
			getDistance(lat1, lng1, lat2, lng2) {
				let EARTH_RADIUS = 6378.137;
				let radLat1 = this.rad(lat1);
				let radLat2 = this.rad(lat2);
				let a = radLat1 - radLat2;
				let b = this.rad(lng1) - this.rad(lng2);
				let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) *
					Math.pow(Math.sin(b / 2), 2)));
				s = s * EARTH_RADIUS;
				//s = Math.round(s * 10000d) / 10000d;
				s = Math.round(s * 10000) / 10000;
				s = s * 1000; //乘以1000是换算成米
				return s;
			},
			// 弧度计算
			rad(d) {
				return d * Math.PI / 180.0;
			},

			// 立即签到
			goSignIn(e) {


				if (this.distance > 10000) {

					uni.showModal({
						title: '温馨提示',
						content: '您的当前位置距离活动目的地太远, 无法签到',
						showCancel: false
					})
					return;
				} else if (this.distance < 0) {

					uni.showModal({
						title: '温馨提示',
						content: '您的定位权限未打开, 请点击小程序右上角···菜单按钮, 然后点击设置,打开定位权限',
						showCancel: false
					})

					return
				}




			},


		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		height: 100%;

	}

	.scrollV {

		width: 100vw;


	}


	.mapV {

		width: calc(100vw);
		height: 320px;
		margin-top: 14px;
	}


	.leftTitle {
		width: 284px;
		height: 44px;
		line-height: 44px;
		font-size: 14px;
		color: #333333;

	}

	.inputView {
		flex-direction: row;
		display: flex;
		height: auto;
		align-items: center;
		margin-left: 13px;
		width: calc(100vw - 30px);
		padding: 2px 0px;
		font-size: 13px;
		color: #666666;

	}


	.btnview {
		display: flex;
		background-color: #FF731E;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		width: 100%;
		height: 50px;
		margin-top: 20px;
	}
</style>